<template>
  <div class="fishBall">
    <div class="name">章鱼丸</div>
    <div class="num">{{myFishBallData.value5}}</div>
    <div class="main">
      <div class="title">
        <div class="left">
          <i class="iconfont icon-huangguan"></i>
          会员等级
        </div>
        <div class="righ">{{myFishBallData.value1}}</div>
      </div>
      <div class="txt">
        <div class="item">
          <span class="key">本月收益</span>
          <span class="val" v-if="myFishBallData.value2">{{myFishBallData.value2}}</span>
          <span class="val" v-else>0</span>
          <!-- <span class="val">{{myFishBallData.value2*myFishBallData.value6}}</span> -->
        </div>
        <div class="item">
          <span class="key">今日收益</span>
          <span class="val" v-if="myFishBallData.value3">{{myFishBallData.value3}}</span>
          <span class="val" v-else>0</span>
        </div>
        <div class="item">
          <span class="key">累计收益</span>
          <span class="val" v-if="myFishBallData.value4">{{myFishBallData.value4}}</span>
          <span class="val" v-else>0</span>
        </div>
      </div>
      <template v-if="Object.keys(myFishBallData).length">
        <!-- {{Object.keys(myFishBallData).length}} -->
        <div class="rmb">
          <span class="val">={{parseFloat(myFishBallData.value2*myFishBallData.value6).toFixed(2)}}</span>
          <span class="val">={{parseFloat(myFishBallData.value3*myFishBallData.value6).toFixed(2)}}</span>
          <span class="val">={{parseFloat(myFishBallData.value4*myFishBallData.value6).toFixed(2)}}</span>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {};
  },
  props: {
    myFishBallData: {}
  },
  computed: {
    ...mapGetters(["user"]),
    DJ() {
      let dj = "";
      if (this.user.DJ == 0) {
        dj = "章鱼旷工";
      }
      if (this.user.DJ == 1) {
        dj = "以太旷工";
      }
      if (this.user.DJ == 2) {
        dj = "比特旷工";
      }
      return dj;
    }
  }
};
</script>
<style lang="stylus" scoped>
.fishBall {
  font-family: 'PingFang-SC-Medium';

  .name {
    margin: 20px auto;
    font-size: 19px;
    font-weight: 500;
    color: rgba(211, 175, 131, 1);
    text-align: center;
  }

  .num {
    font-size: 32px;
    font-weight: 500;
    color: rgba(211, 175, 131, 1);
    text-align: center;
  }

  .main {
    width: 7.04rem;
    height: 6.68rem;
    background: #fff;
    border-radius: 20px;
    margin: 70px auto 0 auto;
    box-sizing: border-box;
    padding: 15px;

    .title {
      width: 5.88rem;
      height: 0.71rem;
      background: rgba(61, 61, 64, 1);
      border-radius: 0.22rem;
      margin: 20px auto 60px auto;
      line-height: 0.71rem;
      color: #fff;
      display: flex;
      padding: 0 30px;
      box-sizing: border-box;

      div {
        flex-grow: 1;
      }

      .righ {
        text-align: right;
        color: #FFD3AF83;
      }
    }

    .txt {
      width: 100%;
      display: flex;

      .item {
        flex-grow: 1;
        text-align: center;
        display: flex;
        flex-direction: column;

        .key {
          color: #46454B;
          font-size: 15px;
          margin-bottom: 5px;
        }

        .val {
          color: #FF7200;
          font-size: 16px;
        }
      }

      .item:nth-child(2) {
        border-left: 1px solid #424242;
        border-right: 1px solid #424242;
      }
    }

    .rmb {
      width: 100%;
      display: flex;
      margin-top: 10px;
      color: #4E5063;
      font-size: 14px;

      span {
        flex: 1;
        text-align: center;
      }
    }
  }
}
</style>

